import React from 'react'
import './weightData.scss'
import { HashRouter as Router, Link } from 'react-router-dom';
import { createHashHistory } from 'history';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List } from 'antd';
import BarrierGate from '../../../component/progress/progress.js';
import { getProjectInfo , getUserProjectInfo} from '../../../api/hardwareCenter'
import cookie from 'react-cookies';
const hashHistory = createHashHistory();
class weightData extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            activeUlId:'',
            data:[],
        }
    }

    componentDidMount() {
        this.getProjectInfo()
    }

    getProjectInfo = () => {
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'state': 2
        }
        getUserProjectInfo(post_data).then(res => {
            console.log(res)
            this.setState({
                activeUlId: res.data[0].id,
                data: res.data
            }, () => {
                this.ulClick(this.state.activeUlId)
            })
        })
    }

    ulClick = (id) => {

        this.setState({
            activeUlId: id
        }, () => {
            console.log(this.state.activeUlId)
        })
        hashHistory.push({ pathname: `/weightDetail`, search: `${id}` })
    }

    render(){
        const {data,activeUlId } = this.state
        return (
            <Router>
                <div className="CloudArrangingmonitor_barrierGateData" id="ContentMainList">
                    <div className="nav_bar_child_list" id="nav_bar_child_list">
                        <div className="title">项目名称</div>
                        <List
                            id="nav_bar_child_list_nav"
                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={item => (
                                <List.Item className={activeUlId === item.id ? "active" : ''}>
                                    <div className={activeUlId === item.id ? 'ulDot' : 'ulDot2'}></div>
                                    <List.Item.Meta
                                    className="ulTitle"
                                    onClick={this.ulClick.bind(this,item.id)}
                                    title={<Link 
                                        to={
                                            {pathname:`/weightDetail`,search:`${item.id}`}
                                            }>{item.project_name}</Link>}
                                        description={`${item.lane_in_count}进${item.lane_out_count}出${(() => {
                                            if (item.project_phase === 1) {
                                                return ' - 厂区建设阶段'
                                            } else if (item.project_phase === 2) {
                                                return ' - 道闸施工阶段'
                                            } else if (item.project_phase === 3) {
                                                return ' - 软件调试阶段'
                                            } else if (item.project_phase === 4) {
                                                return ' - 维保期内'
                                            } else {
                                                return ' - 服务到期'
                                            }
                                        })()}`}
                                    />
                                    
                                    {activeUlId == item.id ? <img alt="" className="jiantou" src={require('../../../assets/img/ulblue.png')} /> : <img alt="" className="jiantou" src={require('../../../assets/img/grey.png')} />}
                                </List.Item>
                            
                            )}
                        />
                      
                    </div>
                    <div className="has_list_conent">     
                        {/* 面包屑组件 */}
                        <BreadcrumbNav />  
                        <div id="content-detail">
                            <BarrierGate />
                        </div>
                    </div>
                </div>
            </Router>
        )
    }
}

export default weightData